import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { sumSine, sumCircleCenterX, sumCircleCenterY } from './math';
import styles from './index.module.less';

const Index = (props) => {
  const { className } = props;

  const [degree, setDegree] = useState(0);
  const [n, setN] = useState(1); // n = 1, 3, 5, 7

  useEffect(() => {
    const id = setInterval(() => {
      setDegree((c) => {
        if (c < 360) {
          return c + 1;
        }
        return 0;
      });
    }, 30);
    return () => clearInterval(id);
  }, []);

  const onSlider = () => {
    const slider = document.getElementById('myRange');
    if (slider.value % 2 > 0) {
      setN(slider.value);
    }
  };

  const circleItems = (nN, deg) => {
    const items = [];
    const nNn = Number(nN);
    const len = (nNn + 1) / 2; // 1, 3, 5, 7
    Array.from({ length: len }, (_value, key) => {
      return 2 * (key + 1) - 1;
    }).forEach((i) => {
      items.push(
        <g key={`fou_circle_${i}`} transform="translate(110 0)">
          <circle
            className="gray"
            cx={i === 1 ? 100 : sumCircleCenterX(i - 2, deg)}
            cy={i === 1 ? 100 : sumCircleCenterY(i - 2, deg)}
            r={(4 / (i * Math.PI)) * 100}
          />
          <line
            x1={i === 1 ? 100 : sumCircleCenterX(i - 2, deg)}
            y1={i === 1 ? 100 : sumCircleCenterY(i - 2, deg)}
            x2={sumCircleCenterX(i, deg)}
            y2={sumCircleCenterY(i, deg)}
          />
        </g>,
      );
    });
    return items;
  };

  return (
    <div className={classnames(styles.root, className)}>
      <div className={classnames(styles.fourierDiv, styles.draw1)}>
        <svg className={styles.svg} width="940" height="350" xmlns="http://www.w3.org/2000/svg">
          <g transform="translate(20 80)">
            {/* circle */}
            {circleItems(n, degree)}

            {/* sine */}
            <g transform="translate(460 0)">
              <line className="gray" x1="0" y1="100" x2="360" y2="100" />
              <polyline
                points={Array.from({ length: 360 }, (_value, key) => {
                  return `${key} ${sumSine(n, key, degree)}`;
                })}
              />
            </g>

            {/* connected line */}
            <line
              className={styles.connectedLine}
              x1={sumCircleCenterX(n, degree) + 110}
              y1={sumCircleCenterY(n, degree)}
              x2={460}
              y2={sumSine(n, 360, degree)}
            />

            <text x="396" y="250">
              n = {n}
            </text>
          </g>
        </svg>
      </div>
      <div className={styles.slidecontainer}>
        <input
          type="range"
          min="1"
          max="100"
          defaultValue="1"
          step="2"
          className="slider"
          id="myRange"
          onInput={onSlider}
        />
      </div>
    </div>
  );
};

Index.defaultProps = {
  className: null,
};

Index.propTypes = {
  className: PropTypes.any,
};

export default Index;
